<template>
    <div class="common-layout">
      <el-container>
        <el-aside class="aside">
          <el-col :span="24">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
      >
      <el-menu-item index="1" class="menu-item" @click="handleOpen('/alarmManagement/alarm')">
          <el-icon><icon-menu /></el-icon>
          <span>告警管理</span>
        </el-menu-item>
        <el-menu-item index="2" class="menu-item" @click="handleOpen('/alarmManagement/flaw')">
          <el-icon><icon-menu /></el-icon>
          <span>缺陷管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>

        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </template>  
  <script lang="ts" setup>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { Menu as IconMenu , Setting,Document } from '@element-plus/icons-vue'


    const router = useRouter()
    const activeIndex = ref('/resource/towerList')  // 默认选中首页

    const handleOpen = (path: string) => {
    router.push(path)  // 跳转到对应的路由
    activeIndex.value = path  // 更新选中的菜单项
  }

  </script>
  
  <style scoped>
    .common-layout {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
    }
    .aside {
      width: 150px;
      height: calc(100vh - 60px);
      background-color: #eae7e7;
      position: relative;
    }
    .main {
      height: 100%;
      background-color: #fff;
      width: 100%;
      overflow: hidden;
      padding: 0%;
    }

    .el-menu-vertical-demo {
        width: 100%;
        position: absolute;
        left:0%;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
    }
    .menu-item {
        margin: 30px 0px;
    }
  </style>